<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix">
			<uni-search-bar 
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="true" 
			 placeholder="输入视频分类名称" 
			 @confirm="confirm" 
			 @input="confirm"></uni-search-bar>
		</view>
		<view class="page__bd" style="padding-top: 100rpx;"></view>
		<view class="video-type">
			<view class="video-type-item" v-for="(item, index) in dataList" :key="index" @click="getVideoInfo(item, index)">
				<view class="video-type-img"><image class="img" :src="item.videoUrl"></image></view>
				<view class="video-type-cont">
					<view class="video-type-tit">{{ item.videoType }}</view>
					<view class="video-type-des">播放量<em style="margin-right: 10px;">{{ item.browsedNums }}</em>共<em>{{ item.learnedNums ? item.learnedNums : 0 }}/{{ item.videoNums }}</em>集</view>
				</view>
				<uni-icons :size="25" class="uni-icon-wrapper" color="#939393" type="arrowright" />
			</view>
		</view>
	</om-page>
</template>

<script>
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	const app = getApp();
	export default {
		data() {
			return {
				pageTitle:"视频分类",
				dataList:[],
				searchStr:"",
			}	
		},
		computed: {
			...mapState(useLoginUserStore, ['userId', 'userName'])
		},
		methods: {
			confirm(e){
				let _that = this
				if (e.value) {
				  if (!_that.searchStr || (_that.searchStr && _that.searchStr != e.value.trim())) {
					_that.searchStr = e.value.trim()
					_that.initData(_that.searchStr)
				  }
				} else {
				  _that.initData()
				}
			},
			getVideoInfo(item,index){
				uni.navigateTo({
					url: "/pages/mine/video/video-info?id="+item.id
				});
			},
			initData(keywords){
				let _that = this;
				_that.om.request('videoRecord/getAllVideoType', {
					keywords: keywords,
				}, 'get').then(res => {
					_that.dataList = res
					for(let i=0; i<_that.dataList.length; i++){
						if(_that.dataList[i].uploadFileData){
							let url = _that.dataList[i].uploadFileData.filePath.substring(11);
							_that.dataList[i].videoUrl = getApp().globalData.url+url.replace('\\','/')+'/'+_that.dataList[i].uploadFileData.fileSaveName;
						}else{
							_that.dataList[i].videoUrl = ''
						}
					}
				});
			}
		},
		onLoad() {
			let _that = this;
			_that.initData()
		},
		onShow() {
			let _that = this;
			_that.initData()
		}
	};
</script>

<style lang="scss" scoped>
	.video-type{
		.video-type-item{
			padding: 12px 15px;
			overflow: hidden;
			border-bottom: 1px solid #c8c7cc;
			display: flex;
			flex-direction: row;
			flex: 1;
			position: relative;
			justify-content: space-between;
			align-items: center;
			.video-type-img{
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-right: 10px;
				.img{
					width: 57px;
					height: 35px;
				}
			}
			.video-type-cont{
				display: flex;
				flex: 1;
				overflow: hidden;
				flex-direction: column;
				color: #3b4144;
				.video-type-tit{
					width: 100%;
					font-size: 14px;
					color: #3b4144;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.video-type-des{
					margin-top: 3px;
					color: #999;
					font-size: 12px;
					overflow: hidden;
					em{
						color: #FD001A;
						font-style: normal;
					}
				}
			}
		}
	}
</style>                                                  